<template>
	<view class="body">
		<view class="goods">
			<view class="img">
				<image
					src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/2022-12-31/105f2466-f90a-47d7-8c16-ee7556844fc0_t015fdd96070fb5a13f.jpg">
				</image>
			</view>
			<view class="message">
				<view style="font-size: 32rpx;color: black;">{{goods.name}}</view>
				<view>价格:
					￥{{goods.min_price == goods.max_price ? goods.min_price : goods.min_price + '-'+goods.max_price}}
				</view>
				<view>库存: {{goods.stock}}</view>
				<view>已售: {{goods.sales}}</view>
			</view>
		</view>
		<view style="width: 90%;background-color: white;padding: 2%; border-radius: 20rpx;margin-top: 30rpx;">
			<u--form :model="dataForm" ref="dataForm" labelPositon="left">
				<u-form-item :label="specifications.titles[index].name" @click="openSelector(index)" borderBottom
					labelWidth="300rpx" v-for="(item,index) in specifications.options"
					v-if="specifications.titles[index].name" :key="item.id">
					<text>{{selects[index].name}}</text>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-picker :show="selectorShow" :columns="selectOptions" keyName="name" @confirm="confirmSelect"
				@cancel="selectorShow = false" >
			</u-picker>
		</view>
		<view class="numberAndPrice">
			<view>
				<view>单价</view>
				<view>￥{{price}}</view>
			</view>
			<view>
				<view>数量</view>
				<u-number-box v-model="number" @change="valChange" :min="1" :max="stock"></u-number-box>
			</view>
			<view>
				<view>总价</view>
				<view>￥{{Math.floor(totalPrice * 100) / 100}}</view>
			</view>
		</view>
		<view class="button" @click="submit(1)">
			<u-button type="success" size="medium">购 买</u-button>
		</view>
	</view>
</template>

<script>
	import Address from '@/components/Address.vue'
	export default {
		components: {
			Address
		},
		data() {
			return {
				goods: {},
				number: 1,
				totalPrice: 0,
				specifications: {},
				selectOptions: [],
				selectorShow: false,
				optionIndex: 0,
				selects: [],
				price: 0,
				stock: 0
			}
		},
		onLoad(data) {
			this.goods = JSON.parse(decodeURIComponent(data.goodsInfo));
			this.getSpecifications();
		},
		methods: {
			valChange(number) {
				this.totalPrice = this.price * number.value
			},
			async getSpecifications() {
				const res = await this.$myRequest2({
					url: 'http://172.17.40.70:8019/product/specification/' + this.goods.id
				})
				this.specifications = res.data
			},
			openSelector(index) {
				this.optionIndex = index;
				this.selectOptions[0] = this.specifications.options[index]
				this.selectorShow = true;
			},
			confirmSelect(option) {
				this.selectorShow = false
				this.selects[this.optionIndex] = option.value[0]
				//计算单价和库存
				if (this.selects.length == this.specifications.titles.length) {
					let code = 0;
					for (let i = 0; i < this.selects.length; i++) {
						if(!this.selects[i]){
							continue;
						}
						code += this.selects[i].code * Math.pow(16, i);
					}
					const goodsList = this.specifications.specifications;
					console.log(code,this.specifications,this.goodsList)
					for (let i = 0; i < goodsList.length; i++) {
						if (goodsList[i].specification_code == code) {
							this.price = goodsList[i].price;
							this.totalPrice = this.price * this.number
							this.stock = goodsList[i].stock;
							break;
						}
					}
				}
			},
			closeShow(index) {
				this.selectorShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #f6f6f6;
	}

	.goods {
		border-radius: 20rpx;
		background-color: #ffffff;
		width: 95%;
		height: 20%;
		margin: 5rpx;
		display: flex;

		.img {
			margin: 10rpx;
			height: 200rpx;
			width: 200rpx;
			border-radius: 10px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.message {
			margin: 10rpx;
			font-size: 30rpx;
			color: #8a8a8a;
		}
	}

	.numberAndPrice {
		margin-top: 30rpx;
		width: 95%;
		background-color: #ffffff;
		border-radius: 20rpx;

		view {
			display: flex;
			font-size: 40rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;

			view {
				width: 300rpx;
				margin-left: 30rpx;
			}
		}
	}

	.button {
		width: 60%;
		margin-top: 20rpx;
	}
</style>
